<template>
  <div :class="['main', { dark: isDarkTheme }]">
    <!-- 右上角配置按钮 -->
    <div class="setting-button" @click="toggleDrawer">
      <el-icon class="icon" size="24px" style=""><Setting /></el-icon>
    </div>

    <!-- 右上角白噪音播放按钮 -->
    <div class="play-sound-button" @click="togglePlaySound">
      <el-icon class="icon play" size="24px" style="" v-if="settings.playSound"><VideoPause /></el-icon>
      <el-icon class="icon" size="24px" style="" v-else><VideoPlay /></el-icon>
    </div>

    <!-- 主页面内容 -->
    <div class="main-container">
      <!-- 居中的一行文字 -->
      <div class="displayText">{{ displayText }}</div>

      <el-progress
        class="progress-circle"
        type="circle"
        :color="settings.themeColor"
        :stroke-width="10"
        :percentage="progress"
        :width="260"
      >
        <template #default>
          <span class="percentage-label">{{ progressText }}</span>
        </template>
      </el-progress>

      <div class="button-group">
        <button
          @click="onStart"
          :disabled="startBtnDisabled"
          :style="{ backgroundColor: !startBtnDisabled ? settings.themeColor : '#d0d0d0' }"
        >
          开始
        </button>
        <button
          @click="onPause"
          :disabled="pauseBtnDisabled"
          :style="{ backgroundColor: !pauseBtnDisabled ? settings.themeColor : '#d0d0d0' }"
        >
          暂停
        </button>
        <button @click="onJump" size="large" v-show="jumpBtnVisible" :style="{ backgroundColor: settings.themeColor }">
          跳过
        </button>
        <button @click="onReset" size="large" :style="{ backgroundColor: settings.themeColor }">重置</button>
      </div>

      <div class="tipsText">{{ tipsText }}</div>
    </div>

    <!-- 对话框 -->
    <el-dialog
      v-model="dialogManager.visible"
      align-center
      width="300"
      :title="dialogManager.topic"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div class="dialog-content">
        <button @click="dialogManager.confirmCallback" :style="{ backgroundColor: settings.themeColor }">
          {{ dialogManager.confirmButtonText }}
        </button>
        <button @click="dialogManager.cancelCallback">{{ dialogManager.cancelButtonText }}</button>
      </div>
    </el-dialog>

    <SettingDrawer />
  </div>
</template>

<script setup>
import { computed, onMounted } from "vue";
import SettingDrawer from "./components/SettingDrawer.vue";

// 导入倒计时管理模块
import {
  startBtnDisabled,
  pauseBtnDisabled,
  jumpBtnVisible,
  progress,
  progressText,
  initCountdown,
  onStart,
  onPause,
  onJump,
  onReset,
  watchSettings,
  tipsText,
} from "./js/countdown.js";
// 导入配置管理模块
import { settings, loadSettings, toggleDrawer, isDarkTheme, togglePlaySound } from "./js/setting.js";
// 导入记录管理模块
import { loadFocusRecord } from "./js/record.js";
// 导入对话框管理模块
import { dialogManager } from "./js/dialog.js";
// 导入顶部显示文本相关模块
import { displayText } from "./js/wiseSaying.js";

/**
 * 初始化函数
 * 初始化页面显示内容和加载相关数据
 * @returns {void}
 */
const init = () => {
  // 加载配置
  loadSettings();
  // 加载专注记录
  loadFocusRecord();
  // 初始化倒计时
  initCountdown();
  // 监听配置变化
  watchSettings();
};
init();
</script>

<style scoped lang="scss">
.main {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f4f4f4;

  // 主页面内容
  .main-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;

    .displayText {
      font-size: 16px;
      color: #888;
    }

    .progress-circle {
      margin: 36px 0;
      .percentage-label {
        font-size: 50px;
        color: #5d5d5d;
        font-weight: 600;
      }
    }

    .button-group {
      button {
        padding: 10px 20px;
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        cursor: pointer;
        margin: 0 8px;
        &:disabled:hover {
          cursor: not-allowed;
        }
      }
    }

    .tipsText {
      margin-top: 20px;
      font-size: 14px;
      color: #888;
    }
  }

  // 右上角配置按钮
  .setting-button {
    position: absolute;
    top: 30px;
    right: 30px;
    cursor: pointer;

    .icon {
      color: #666;
      &:hover {
        color: #444;
      }
    }
  }

  // 右上角白噪音播放按钮
  .play-sound-button {
    position: absolute;
    top: 30px;
    right: 70px;
    cursor: pointer;

    // 定义旋转动画
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    .icon {
      color: #666;
      &:hover {
        color: #444;
      }
    }
    .play {
      animation: rotate 6s linear infinite;
    }
  }

  .dialog-content {
    button {
      padding: 10px 20px;
      background-color: #42b983;
      color: white;
      border: none;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
      margin: 0 8px;
      transition: all 0.3s ease-in-out;
      &:nth-child(1) {
        background-color: #42b983;
        color: white;
      }
      &:nth-child(2) {
        background-color: #fff;
        color: #5a5a5a;
      }
      &:hover {
        transform: translateY(-1px);
      }
    }
  }
}

// 暗黑模式样式
.main.dark {
  .main-container {
    background-color: #303133;
    .progress-circle {
      .percentage-label {
        color: #ddd;
      }
    }
  }

  // 右上角配置按钮
  .setting-button {
    .icon {
      color: #999;
      &:hover {
        color: #bbb;
      }
    }
  }

  // 右上角白噪音播放按钮
  .play-sound-button {
    .icon {
      color: #999;
      &:hover {
        color: #bbb;
      }
    }
  }
}
</style>
